<template>
    <div class="ex-pictures">
        <div class="ep-line">
            <div class="ep-title">
                More news
            </div>

        </div>
        <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
        <div class="ep-content">
<!--            <div class="epc-card">-->
<!--                <div class="epc-img">-->
<!--                    &lt;!&ndash; <img src="" alt="logo"> &ndash;&gt;-->
<!--                </div>-->
<!--                <div class="epc-card-right">-->
<!--                    <div class="epc-type">News Type</div>-->
<!--                    <div class="epc-des">This is a news headline This is a news headline</div>-->
<!--                    <div class="epc-date">03/19/2024</div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="epc-card" v-for="(item, index) in list" @click="turnTo(item.id)">
              <div class="epc-img">
                <img :src="item.thumbnailUrl" alt="logo" />
              </div>
              <div class="epc-card-right">
                <div class="epc-type">News Type</div>
                <div class="epc-des">{{ item.title }}</div>
                <div class="epc-date">{{dateFilter(item.publishTime, "MM/dd/yyyy")  }}</div>
              </div>
            </div>


        </div>

        <!-- </Transition> -->

    </div>

</template>
<script setup lang="ts">
import { ref } from 'vue'
const config = useRuntimeConfig();
const hostURL = config.public.hostURL;

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const list = props.data ? ref(props.data) : ref([]);
const router = useRouter();
const turnTo = (id: string) => {
  router.push(`/article/${id}`);
};

</script>
<style scoped lang="scss">
.ex-pictures {
    position: relative;
    padding: 0 170px;
    background: #fff;
    width: 1580px;
    // height: 1760px;
    padding-bottom: 100px;
    padding-top: 100px;

    .ep-line {

        display: inline-flex;

        .ep-title {
            width: 369px;
            // text-align: center;
            font-size: 56px;
            color: #30363A;
            line-height: 112px;
            font-weight: 700;
        }

    }

    .ep-content {
        width: 1680px;
        justify-content: space-between;
        // margin-bottom: 10px;

        .epc-card {
            cursor: pointer;
            overflow: hidden;
            display: inline-flex;
            width: 735px;
            height: 338px;
            padding-top: 54px;
            margin-right: 68px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);

            .epc-img {
                width: 226px;
                height: 226px;
                background-color: rgb(202, 201, 201);

                img {
                    width: 226px;
                    height: 226px;
                    object-fit: cover;
                    transition: all 0.6s;
                }
            }

            .epc-card-right {
                height: 226px;
                padding-left: 56px;

                .epc-type {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 60px;
                    color: #C78E66;
                }

                .epc-des {
                    font-size: 24px;
                    width: 472px;
                    //height: 68px;
                    line-height: 38px;
                    font-weight: 600;
                }

                .epc-date {
                    width: 89px;
                    // text-align: center;
                    height: 21px;
                    font-size: 16px;
                    line-height: 70px;
                }

            }
        }

        .epc-card:hover .epc-img img {
            transform: scale(1.05);
        }

        .epc-card:hover {
            border-bottom: 1px solid #C78E66;
        }

    }
}
</style>
